<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="/css/main.css"/>
		<script>
			init = function() {
				document.getElementById('headline').innerText = chrome.i18n.getMessage('headline');
				document.getElementById('label_hashtags_checkbox').innerText = chrome.i18n.getMessage('remove_hashtags');

				switch (window.localStorage.getItem('remove_hashtags')) {
					case null:
					case undefined:
						window.localStorage.setItem('remove_hashtags', 'false');
						break;
				}

				if (window.localStorage.getItem('remove_hashtags') == 'true') {
					document.getElementById('hashtags_checkbox').checked = 'checked';
				}

				getTrends();
				delete init;
			}

			openLink = function(url) {
				switch (window.localStorage.getItem('link_target')) {
					case null:
					case undefined:
					case 'new_tab':
						chrome.tabs.create({'url': url});
						break;
					case 'active_tab':
						chrome.windows.getCurrent(function(w) {
							wid = w.id;
							chrome.tabs.getSelected(wid, function(t) {
								tid = t.id;
								chrome.tabs.update(tid, {'url': url});
							});
						});
						break;
					case 'new_window':
						chrome.windows.create({'url': url});
						break;
				}

				window.close();
			}
			
			getTrends = function() {
				window.localStorage.setItem('remove_hashtags', String(document.getElementById('hashtags_checkbox').checked));

				var time = new Date();
				var hours = (time.getHours() < 10 ? '0' : '') + String(time.getHours());
				var minutes = (time.getMinutes() < 10 ? '0' : '') + time.getMinutes();
				var seconds = (time.getSeconds() < 10 ? '0' : '') + time.getSeconds();
				document.getElementById('lastUpdate').innerHTML = chrome.i18n.getMessage('last_update')+': '+String(hours)+':'+String(minutes)+':'+String(seconds);

				var url = 'http://api.twitter.com/1/trends/current.json';
				if (window.localStorage.getItem('remove_hashtags') == 'true') {
					url += '?exclude=hashtags';
				}

				var xhr = new XMLHttpRequest();
				xhr.open('GET', url, true);
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						var response = JSON.parse(xhr.responseText);
						trends = response.trends;
						for ( var i in trends ) {
							document.getElementById('trends').innerHTML = '';
							var items = '';
							for ( var j = 0; j < trends[i].length; j++ ) {
								name = trends[i][j].name;
								name = name.replace(/&/g,'&amp;');
								query = trends[i][j].query;
								query = name.replace(/#/g,'%23');
								items += '<div><a href="javascript:openLink(\'http://search.twitter.com/search?q='+encodeURIComponent(query)+'\')" style="background-image: url(/images/'+String(j+1)+'.png);">'+name+'</a></div>';
							}
							document.getElementById('trends').innerHTML = items;
						}
					}
				}
				xhr.send();
			}

		</script>
	</head>
	<body onload ="init()">
		<h1 id="headline"></h1>
		<div id="wrapper">
			<div id="trends"></div>
			<form method="get" id="hashtags_form">
				<input type="checkbox" id="hashtags_checkbox" onclick="getTrends()"/> <label for="hashtags_checkbox" id="label_hashtags_checkbox"></label>
			</form>
			<div id="lastUpdate"></div>
		</div>
	</body>
</html>